<template>
	<view class="container">
		<!-- 个人信息 -->
		<view class="info">
			<view class="head-portrait">
				<image :src="info.headPic? info.headPic : '/static/logo.png'" mode="widthFix"></image>
			</view>
			<view class="person-info">
				<view class="phone-box">
					<text>{{info.phone}}</text>
					<text>刷新</text>
				</view>
				<view class="auth-status">{{ info.isAuth = 1  ? '已认证' :  '未认证'}}</view>
			</view>
		</view>
		<!-- 各项操作 -->
		<view class="handler-container">
			<view class="card-container">
				<view class="card-title">入职管理</view>
				<view class="card-container">
					<view class="item">
						<view class="item-icon iconfont icon-shimingrenzheng"></view>
						<view class="item-text">实名认证</view>
					</view>
					<view class="item">
						<view class="item-icon iconfont icon-ruzhibanli"></view>
						<view class="item-text">入职办理</view>
					</view>
					<view class="item">
						<view class="item-icon iconfont icon-a-menhuxinzichaxun"></view>
						<view class="item-text">薪资查询</view>
					</view>
				</view>
			</view>
			<view class="card-container">
				<view class="card-title">入职管理</view>
				<view class="card-container">
					<view class="item">
						<view class="item-icon iconfont icon-hetongguanli"></view>
						<view class="item-text">合同管理</view>
					</view>
					<view class="item">
						<view class="item-icon iconfont icon-OA_yinzhangguanli"></view>
						<view class="item-text">印章管理</view>
					</view>
					<view class="item">
						<view class="item-icon iconfont icon-zhengmingguanli"></view>
						<view class="item-text">证明管理</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';


	const info = ref({
		phone: '15769103757',
		isAuth: 1,
		headPic: ''
	})
</script>

<style lang="scss" scoped>
	view.container {
		height: calc(100vh - 94px);
		background-color: #fafafa;
		view.info {
			background-color: #fff;
			display: flex;
			padding: 30upx;
			align-items: center;
			view.head-portrait {
				width: 130upx;
				border-radius: 20upx;
				overflow: hidden;
				margin-right: 20upx;
				image {
					width: 100%;
				}
			}

			view.person-info {
				view.phone-box {
					margin-bottom: 20upx;
					text {}
				}

				view.auth-status {
					font-size: 24upx;
					border: 1px solid #aaa;
					padding:5upx;
					display:inline;
					color: #aaa;
				}
			}
		}

		view.handler-container {
			view.card-container {
				background: #fff;
				margin: 20upx 30upx;
				border-radius: 20upx;
				padding: 20upx;
				view.card-title {
					font-weight: bold;
				}

				view.card-container {
					display: flex;
					align-items: center;
					justify-content: space-between;
					view.item {
						text-align: center;
						view.item-icon {
							font-size:80upx;
							color: #0ce9e8;
						}

						view.item-text {
							font-size: 28upx;
							margin-top: 10upx;
						}
					}
				}
			}
		}
	}
</style>